import HomeCard from '@/components/HomeCard'
import { useCharts } from '@/hooks/useCharts'
import { useModel } from '@umijs/max'
import React, { useEffect } from 'react'
import { formatMoney } from '@/utils/utils'

const LastMoneyBar = ({ dateTypeObj }) => {
  const { GetReceivedFinalPaymentCurve } = useModel('DataCenter')
  const [lastMoneyBarRef, lastMoneyBarChart, lastMoneyBarLoading, setlastMoneyBarLoading] = useCharts() // 租金柱状图

  useEffect(() => {
    if (lastMoneyBarChart) getLastMoneyBarData()
  }, [lastMoneyBarChart])

  const getLastMoneyBarData = async (dateType = '近一周') => {
    lastMoneyBarChart?.clear()
    setlastMoneyBarLoading(true)

    let params = {
      dateType: dateTypeObj[dateType].type
    }
    const res = await GetReceivedFinalPaymentCurve(params)

    if (res) {
      let data = []
      let xData = []
      let endValue = dateTypeObj[dateType].endValue

      res.forEach(item => {
        data.push(item.today_received_closing_amount)
        xData.push(item.date_string)
      })

      let option = {
        color: ['#2386FD'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            fontFamily: 'DINPro-Medium',
            interval: 0,
            rotate: 40,
            fontSize: 9
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontFamily: 'DINPro-Medium'
          }
        },
        dataZoom: {
          type: 'slider',
          realtime: true,
          startValue: 0, // 重点
          endValue,
          xAxisIndex: [0],
          bottom: '10',
          left: '30',
          right: '30',
          height: 10,
          borderColor: 'rgba(0,0,0,0)'
        },
        series: [
          {
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              barBorderRadius: [7, 7, 0, 0]
            },
            emphasis: {
              itemStyle: {
                color: '#2386FD'
              },
              label: {
                show: true,
                position: 'top',
                distance: 5,
                padding: [15, 15, 20, 15],
                color: '#fff',
                fontSize: 14,
                fontFamily: 'DINPro-Medium',
                backgroundColor: {
                  image:
                    ''
                },
                formatter: params => {
                  return formatMoney(params.value, true)
                }
              }
            },
            data
          }
        ]
      }

      lastMoneyBarChart?.setOption(option)

      setlastMoneyBarLoading(false)

      // let currentIndex = dateTypeObj[dateType].date
      let currentIndex = data.findIndex(item => item.match(Math.max(...data)))

      lastMoneyBarChart?.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      })
      lastMoneyBarChart?.on('mouseover', function (e) {
        if (e.dataIndex !== currentIndex) {
          lastMoneyBarChart?.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
          })
        }
      })
      lastMoneyBarChart?.on('mouseout', function (e) {
        currentIndex = e.dataIndex
        lastMoneyBarChart?.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      })
    }
  }

  return (
    <>
      <HomeCard
        width={'50%'}
        height={'300px'}
        leftContent={{
          subTitle: '趋势图',
          title: '已收尾款'
        }}
        loading={lastMoneyBarLoading}
        isTab
        tabClick={item => getLastMoneyBarData(item)}
      >
        <div ref={lastMoneyBarRef} className='chart_box' />
      </HomeCard>
    </>
  )
}
export default LastMoneyBar
